<template>
	<view class="goods_details">
		<image src="@/static/mmx/activity1.png" mode="widthFix" style="width:100%"></image>
		<view class="endTimeBox" v-if="timeData>0">
			<image src="../../static/fast.png" mode="widthFix"></image>
			<text class="tips">活动倒计时:</text>
			<u-count-down :timestamp="endtime" format="DD:HH:mm:ss" separator-color="#FFFFFF" font-size="20rpx"
				separator="zh" autoStart millisecond @change="timeChange"></u-count-down>
		</view>
		<view class="endTimeBox" v-else>活动已结束</view>
		<view class="detailsBox">
			<view class="active_introd">
				<view class="title">{{goodsInfos.name}}</view>
				<view class="addressBox">
					<u-icon name="map" color="#000000" size="40"></u-icon>
					<text>这里是线下活动的地址具体位置</text>
				</view>
				<view class="funtionBox">
					<view class="item">
						<u-icon name="account" color="#979797" size="40"></u-icon>
						<text>500</text>
					</view>
					<view class="item">
						<u-icon name="star" color="#979797" size="40"></u-icon>
						<text>50000</text>
					</view>
					<view class="item">
						<u-icon name="eye" color="#979797" size="40"></u-icon>
						<text>1.0w</text>
					</view>
				</view>
			</view>
			<view class="join_people">
				<view class="tipsBox">
					<view class="num">500</view>
					<view class="tips">人参与</view>
				</view>
				<view class="peopleBox">
					<view class="imgBox" v-for="(item,index) in list" :key="index" :style="{transform: `translateX(-${index*15}rpx)`}">
						<image src="../promotion/static/Bargaining.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="rulesBox">
				<view class="tips">活动规则</view>
				<view class="rules">
					活动规则的内容，活动规则的内容活动规则的内容活容活动规活动规则的内容，活动规则的内容活动规则的内容活容活动规活动规则的内容，活动规则的内容活动规则的内容活容活动规活动规则的内容，活动规则的内容活动规则的内容活容活动规活动规则的内容，活动规则的内容活动规则的内容活容活动规
				</view>
			</view>
			<view class="rulesBox">
				<view class="tips">活动奖品</view>
				<view class="prizeBox">
					<view class="imgBox">
						<image src="../promotion/static/Bargaining.png" mode="heightFix"></image>
					</view>
					<view class="prizeIntrud">
						<view class="name">
							华为智慧屏 SE65 畅连通话版4KHDR HarmonyOS2 65英寸全…
						</view>
						<view class="priceBox">
							<text class="symbol">￥</text>
							<text>500</text>
						</view>
					</view>

				</view>
				<view class="scheduleBox">
					<text class="tips">活动进度</text>
					<view class="slider">
						<u-line-progress height="10" active-color="#FA6C3E" :percent="current/total *100"
							:show-percent="false"></u-line-progress>
					</view>
					<view class="sliderTips">
						<view class="sliderTipsL">
							已瓜分<text>{{current}}</text>份
						</view>
						<view class="sliderTipsR">共 30 份</view>
					</view>
				</view>
			</view>
			<view class="eventBox">
				<view class="tips">活动详情</view>
				<view class="content">
					影院程需及学工况厂国连心群白中完些去种它千研也次四每老如国金指究转众验何组了委却矿存只连不便律交装场林化己光口只场而细法界二法。代任化设工公南有工化用飞天议加们得社求条提广算精格需标眼何党整市满改调有必回正山断厂或正共上期心院转性问部起使别对线气委技平型利转得。际十组经提响白好米劳史叫业县么便期劳天间较响速向件何者音来华信厂入林国手改成。严次五以期与细东空与红革战天厂党交使活成知元第发北器放厂统入名组员并王许红打加条。教然门半拉较效个做整集县想义好决原机县外学存素精也最增行群在出手别六设克必便温的走们线值类月面没马统己极品开南着难干解改织越维并必争。革风这基六心去利保基转定商易或听天少办成便青来养百价证展车证书温省统去人式才政比工人很群干所队色总相群权小克里道主市什么多听主精手越这。易状它活以派除近五事给正论发力后总先引何位四需少体切低时极制同体例须组代单节只基共边话件文识没拉点引车与线铁工组江各过方身术般济比中。领可消通因接还报派带选为列时毛到深备管导上化支团且据始天己领代队行决。需向县光影阶发容完它米走选名还别集品八后又证了力研音易实流做引持教打安便更四确深听据求观积种党保列好比快。京两边具观片非深反电影展院者们解把风后个长压常红员节度入始多于效于并权米查美见状象着书县存时便安飞色将头争具没把将究领美须写素图反容金路气代根候眼根式现高济得装你委。人进装者过用价三运员万今样动生照报共去斗三往什称心有表代回很更料状非包要细先存参车才革技关型求运斯六花满构全系品十节叫省我。线今包采意处儿北满民做场法目界老位除即交改老几他别京集石关水何都文二马样级物住温农回西九层。该农断七查术质命设好九日整却候新化这少市活本路安社量识们山转流至它特非口真事当划白需有区周数入县众工圆改起半加。起意没采每论构技府算广机被示边前明道素深究白压设商最身却证定务的般现压革果算走见常你党但热完水约步。
				</view>
			</view>
			<view class="otherBox">
				<view class="title">
					<view class="solid"></view>
					<text>看了又看</text>
					<view class="solid"></view>
				</view>
				<goodsList :res="list"></goodsList>
			</view>
			<view class="placeholder">
				
			</view>
		</view>
		<view class="fixedBox">
			<view class="item">
				<u-icon name="bag" color="#666666" size="40"></u-icon>
				<text>店铺</text>
			</view>
			<view class="item">
				<u-icon name="server-man" color="#666666" size="40"></u-icon>
				<text>客服</text>
			</view>
			<view class="item">
				<u-icon name="star" color="#666666" size="40"></u-icon>
				<text>收藏</text>
			</view>
			
			<view class="joined">我要参加</view>
		</view>
	</view>
</template>

<script>
	import goods_List from "@/pages/goods/goosList"; 
	export default {
		
		data() {
			return {
				goodsInfos: {
					name: '活动名称活动名称相关的活动满199减100 '
				},
				endtime: 60,
				timeData: 86400,
				total: 20, //共多少
				current: 17, //当前多少
				list:[
					{},{},{}
				]
			}
		},
		components: {
			goodsList:goods_List
		},
		onLoad(options) {
			this.goodsInfo = JSON.parse(options.item)
			console.log(this.goodsInfo)
		},
		methods: {
			// 倒计时变化
			timeChange(e) {
				this.timeData = e
			},
		},

	}
</script>
<style lang="scss" scoped>
	.goods_details {
		background: #F8FAFF;
		min-height: 100vh;
	}

	.endTimeBox {
		width: 100%;
		height: 82rpx;
		background: #FB6E49;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 46rpx;
			margin-right: 10rpx;
		}

		.tips {
			font-size: 28rpx;
			margin-right: 12rpx;
		}

		/deep/.u-countdown-item {
			height: 40rpx;
			width: 40rpx;
			margin-right: 10rpx;
			margin-left: 10rpx;
		}
	}

	.detailsBox {
		width: 100%;
		background: #F8FAFF;
		min-height: 100vh;
		padding: 0px 20rpx;
		padding-top: 20rpx;
		box-sizing: border-box;
		.active_introd {
			background: #FFFFFF;
			width: 100%;
			border-radius: 16rpx;
			padding: 0rpx 30rpx;
			padding-top: 32rpx;
			box-sizing: border-box;

			.title {
				font-size: 32rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
			}

			.addressBox {
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #AAAAAA;

				text {
					margin-left: 12rpx;
				}
			}

			.funtionBox {
				margin-top: 30rpx;
				display: flex;
				border-top: 1px solid #EFEFEF;
				height: 86rpx;

				.item {
					width: 100%;
					flex-shrink: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FA6C3E;

					text {
						margin-left: 6rpx;
					}
				}
			}

		}

		.join_people {
			margin-top: 30rpx;
			border-radius: 16rpx;
			background: #FFFFFF;
			width: 100%;
			padding: 24rpx 30rpx;
			box-sizing: border-box;
			display: flex;

			.tipsBox {
				margin-right: 20rpx;
				flex-shrink: 0;
				font-family: PingFangSC-Medium, PingFang SC;
				font-size: 24rpx;
				align-items: center;

				.num {
					font-weight: 500;
					color: #FA6C3E;
					line-height: 36rpx;
					text-align: center;
				}

				.tips {
					font-weight: 400;
					color: #AAAAAA;
				}
			}

			.peopleBox {
				width: 100%;
				flex-shrink: 1;
				display: flex;
				justify-content: flex-end;
				.imgBox {
					width: 60rpx;
					height: 60rpx;
					border: 2rpx solid #FFFFFF;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
			}
		}

		.rulesBox {
			margin-top: 30rpx;
			border-radius: 16rpx;
			background: #FFFFFF;
			width: 100%;
			padding: 24rpx 30rpx;
			box-sizing: border-box;

			.tips {
				font-size: 32rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #010103;
				line-height: 32rpx;
			}

			.rules {
				margin-top: 34rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #848484;
				line-height: 40rpx;
			}

			.prizeBox {
				margin-top: 30rpx;
				display: flex;
				height: 160rpx;
				align-items: center;

				.imgBox {
					width: 160rpx;
					height: 160rpx;
					margin-right: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						max-height: 100%;

					}
				}

				.prizeIntrud {
					width: 480rpx;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.name {
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 32rpx;
					}

					.priceBox {
						font-size: 32rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #FA4F0B;
						line-height: 30rpx;

						.symbol {
							font-size: 20rpx !important;
							line-height: 20rpx;
						}
					}
				}

			}

			.scheduleBox {
				margin-top: 30rpx;

				.tips {
					font-size: 26rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 24rpx;
				}

				.slider {
					// margin-top: 30rpx;
					margin-bottom: 16rpx;
				}

				.sliderTips {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #848484;
					line-height: 24rpx;

					.sliderTipsL text {
						color: #FA6C3E;
					}
				}
			}
		}

		.eventBox {
			margin-top: 30rpx;
			border-radius: 16rpx;
			background: #FFFFFF;
			width: 100%;
			padding: 24rpx 30rpx;
			box-sizing: border-box;
			.tips{
				font-size: 32rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #010103;
				line-height: 32rpx;
			}
			.content{
				margin-top: 30rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 36rpx;
			}
		}
		.otherBox{
			margin-top: 30rpx;
			border-radius: 16rpx;
			width: 100%;
			padding: 24rpx 0rpx;
			box-sizing: border-box;
			.title{
				font-size: 32rpx;
				margin-bottom: 34rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #010103;
				line-height: 32rpx;
				display: flex;
				width: 100%;
				align-items: center;
				justify-content: center;
			}
			.solid{
				width: 20rpx;
				height: 2rpx;
				background: #010103;
				margin-right: 20rpx;
				margin-left: 20rpx;
			}
			.solid:nth-child(1){
				margin-right: 20rpx;
			}
			.solid:nth-child(2){
				margin-left: 20rpx;
			}
		}
		.placeholder{
			height: 160rpx;
			width: 100%;
		}
	}
	
	.fixedBox{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 150rpx;
		background: #FFFFFF;
		padding: 0px 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.item{
			margin-right: 52rpx;
			font-size: 20rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			text{
				margin-top: 10rpx;
			}
		}
		.joined{
			width: 340rpx;
			height: 72rpx;
			background: #FA6C3E;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 72rpx;
			text-align: center;
		}
	}
</style>
